<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-input placeholder="请输入监控项名称搜索" v-model="queryForm.query.name">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="hawkSearch" @click="init">搜索</el-button>
        <el-button plain @click="reSet">重置</el-button>
      </el-col>

      <el-col :span="4"
              style="float: right;text-align: right;padding-right: 30px">
        <!-- <el-button type="primary" @click="syncItem">同步监控项</el-button> -->
        <el-button type="hawkCreate" @click="handleEdit">创建监控项</el-button>
      </el-col>
    </el-row>
    <hawk-table :table-data="tableData" :number="true"
                v-model="multipleSelection" :options="[
        { key: 'hostName', label: '主机' },
        { key: 'nickName', label: '主机别名' },
        { key: 'name', label: '监控项' },
        { key: 'delay', label: '采集时间' },
        { key: 'history', label: '历史记录' },
        { key: 'trends', label: '趋势' },
        { key: 'handle', label: '操作', width: '180' }
      ]">

      <template #hostName="{ row }">
        <span>{{ hostName }}</span>
      </template>
      <template #nickName="{ row }">
        <span>{{ nickName }}</span>
      </template>

      <template #delay="{ row }">
        <span>{{ getUnit(row.delay) }}</span>
      </template>
      <template #history="{ row }">
        <span>{{ getUnit(row.history) }}</span>
      </template>
      <template #trends="{ row }">
        <span>{{ getUnit(row.trends) }}</span>
      </template>
      <template #handle="{ row }">
        <span class="hawk-text-btn" @click="separate(row)"
              v-if="row.templateId">脱离模板</span>
        <span class="hawk-text-btn" @click="handleEdit(row)"
              v-if="!row.templateId">编辑</span>
        <span class="hawk-text-divider" v-if="!row.templateId">|</span>
        <span class="hawk-text-btn" @click="del(row)"
              v-if="!row.templateId">删除</span>
      </template>

    </hawk-table>

    <div class="bottom-btns">
      <div class="bottom-btns-left">
        <div class="bottom-btns-left-num">
          {{ multipleSelection.length }} 选择
        </div>
        <el-button type="hawkDelete" @click="multiDel">批量删除</el-button>
        <!-- <el-button plain>导出</el-button> -->
      </div>
      <!-- v-if="tableData.length <= queryForm.page.size" -->
      <el-pagination background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="queryForm.page.current"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="queryForm.page.size"
                     layout=" prev, pager, next,sizes" :total="total">
      </el-pagination>

      <item-add ref="itemAdd" @init="init"></item-add>
    </div>
  </div>
</template>

<script type="text/javascript">
/*
 * @author 宋辉辉
 * @description 监控项列表的视图层
 * @api 暂无
 * @since 2021年11月8日15:48:41
 * @update 2021年11月8日15:48:45
 * @modifier 修改人
 * @bug 无
 * @version v1.0.0
 */
import { getItemList, separateItem, doDelete, searchList, syncItem }
  from '@/api/monitor/config/host/item'


import ItemAdd from './components/itemAdd.vue'

import {
  getHostDetail
}
  from '@/api/monitor/config/host/index.js'


export default {
  components: { ItemAdd },
  data () {
    return {
      queryForm: {
        query: {
          name: '',
          hostId: '',
        },
        page: {
          current: 1,
          size: 10
        }
      },
      tableData: [],
      total: 0,
      unitList: [
        {
          value: 's',
          lable: '秒'
        },
        {
          value: 'm',
          lable: '分钟'
        },
        {
          value: 'h',
          lable: '小时'
        },
        {
          value: 'd',
          lable: '天'
        },
        {
          value: 'w',
          lable: '周'
        }
      ],

      row: '',
      hostDetail: null,
      multipleSelection: [],
      hostName: '',
      nickName: ''
    }
  },
  async created () {

    // console.log("--------created-----");

    this.row = this.$route.params.row
    this.hostName = this.row.host
    this.nickName = this.row.name
    console.log(this.row);

    this.queryForm.query.hostId = this.row.hostid
    this.init()

    // 根据 hostid 获得主机详细信息
    let ret = await getHostDetail(this.row.hostid)
    console.log(ret, '-----根据ID 获得详情--------');
    if (ret.code == 20000) {
      // this.editData.templates = ret.data.templates
      // this.selectedTemplateId = this.editData.templates[0].templateid
      this.hostDetail = ret.data
    }

    console.log(this.hostDetail);


  },

  methods: {

    async init () {

      const ret = await getItemList(this.queryForm)
      console.log(ret);
      if (ret.code == 20000) {

        let data = ret.data
        this.tableData = data.records
        /* console.log(this.tableData)*/
        this.total = data.total;
      }
      console.log(this.tableData);
    },
    handleSizeChange (val) {
      this.queryForm.page.size = val
      this.init()
    },
    // handleSelectionChange (val) {
    //   console.log(val);
    //   this.multipleSelection = val
    // },
    async searchData () {
      const { data } = await searchList(this.queryForm)
      this.tableData = data.list
      this.total = data.total
    },
    reSet () {
      this.queryForm = this.$options.data().queryForm

      this.queryForm.query.hostId = this.row.hostid

      this.init()
    },
    handleCurrentChange (val) {
      this.queryForm.page.current = val
      this.init()
    },

    async handleEdit (row) {

      console.log(row, 123332132)

      if (row.itemid) {
        this.$refs.itemAdd.open(row, this.hostDetail)
      } else {
        this.$refs.itemAdd.open(null, this.hostDetail)
      }
    },

    async syncItem () {
      this.$confirm('是否同步监控项？', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否'
      })
        .then(async () => {
          let data = await syncItem(this.queryForm.query.hostId)
          this.$message({
            type: 'success',
            message: data.msg
          })
          this.init()
        })
        .catch(() => { })

    },
    separate (row) {
      this.$confirm('是否使监控项脱离模板？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          const { msg } = await separateItem(row)
          this.$message({
            type: 'success',
            message: msg
          })
          this.init()
        })
        .catch(() => { })
    },
    del (row) {
      this.$confirm('是否删除当前监控项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          const ret = await doDelete([row.itemid])

          if (ret.code == 20000) {

            let type = ''
            if (ret.data || ret.message.indexOf('成功') != -1) {
              ret.message = '删除成功'
              type = 'success'
            } else {
              type = 'error'
            }
            this.$message({
              type: type,
              message: ret.message,
            })

            // console.log(this.multipleSelection.length);
            if (this.tableData.length == 1) {
              this.queryForm.page.current = this.queryForm.page.current - 1
              if (this.queryForm.page.current < 1) {
                this.queryForm.page.current = 1
              }
            }

            this.multipleSelection = []
            this.init()


          }




        })
        .catch(() => { })
    },
    async multiDel () {

      if (this.multipleSelection.length < 1) {
        this.$message({
          type: 'warning',
          message: '请选择需要删除的数据',
        })
        return
      } else {
        let idList = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          idList.push(this.multipleSelection[i].itemid)
        }
        console.log(idList)
        let ret = await doDelete(idList)

        if (ret.code == 20000) {

          let type = ''
          if (ret.data || ret.message.indexOf('成功') != -1) {
            ret.message = '删除成功'
            type = 'success'
          } else {
            type = 'error'
          }

          this.$message({
            type: type,
            message: ret.message,
          })

          // console.log(this.multipleSelection.length);
          if (this.multipleSelection.length == this.tableData.length) {
            this.queryForm.page.current = this.queryForm.page.current - 1
            if (this.queryForm.page.current < 1) {
              this.queryForm.page.current = 1
            }
          }

        }

        //清空选择框
        this.multipleSelection = []
        this.init()

      }

    },
    getUnit (value) {

      let unit = value.substring(value.length - 1)
      let v = value.substring(0, value.length - 1)
      let list = this.unitList.filter(item => item.value == unit)
      if (list != null && list.length > 0) {
        return v + list[0].lable
      }
    }
  }
}
</script>

<style scoped></style>
